<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            
            <a-form-model-item label="问题标题" prop="title">
                <a-input v-model="form.title" :disabled="disabled" placeholder="请输入问题标题" />
            </a-form-model-item>
            <a-form-model-item label="问题类型" prop="type">
                <a-select v-model="form.type" :disabled="disabled" placeholder="请选择问题类型">
                    <a-select-option :value="item.value" v-for="item in questionTypes" :key="item.value">{{item.name}}</a-select-option>
                </a-select>
            </a-form-model-item>

            <a-form-model-item label="问题描述" prop="content">
                <a-input type="textarea" :disabled="disabled" :rows="4" :maxLength="200" v-model="form.content" placeholder="请输入问题描述" />
            </a-form-model-item>

            <a-form-model-item label="上传图片" prop="file" v-if="!form.id || (form.id && form.imageUrls.length)">
                <upload-file :max="4" :list="form.imageUrls" @upload="uploadImages" :disabled="disabled" @delete="deleteFile"/>
            </a-form-model-item>

            <a-form-model-item label="解决备注" v-if="form.id" prop="fixContent">
                <a-input type="textarea" :rows="4" :disabled="form.status==2?true:false" v-model="form.fixContent" placeholder="请输入问题描述" />
            </a-form-model-item>
            
            <a-form-model-item label="状态" v-if="form.id && form.status==2">
                <a-switch :checked="true" disabled/>
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import { mapState } from 'vuex';
import { addInfo, updateInfo,remoteDetailById } from '@/api/question';
import { questionTypes } from '../dictionary';
import UploadFile from '@/components/uploadFile'

export default {
    name: 'CompanyInfo',
    components:{
        UploadFile,
    },
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        }),
        disabled(){
            return this.info.id?true:false
        }
    },
    data() {
        return {
            loading: false,
            questionTypes,
            title: '问题信息',
            rules,
            form: {
                userId:'',
                title: '',
                type: undefined,
                content: '',
                fixContent:'',
                imageUrls:[],
                status: 0
            },
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            }
        };
    },
    created() {
        if(!this.info.id){
            this.form.userId = this.accountInfo.userId;
        }else{
            this.getDetail(this.info.id)
        }
        
    },
    methods: {
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let res = null;
                        if (this.form.id) {
                            //新增
                            this.form.status = 2;
                            res = await updateInfo(this.form);
                        }else{
                            let imageUrls = this.form.imageUrls.join(',')
                            res = await addInfo(imageUrls,this.form);
                        }
                        if (res.code == 200) {
                            this.$message.success('操作成功!');
                        } else {
                            this.$message.error(res.message);
                        }
                        this.$emit('submit');
                    } finally {
                        this.loading = false;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //获取详情
        async getDetail(id){
            try{
                this.loading = true;
                let res = await remoteDetailById(id);
                let {data} = res;
                this.form = { ...this.form, ...data };
                let {questionImageList=null} = data;
                if(questionImageList && questionImageList.length){
                    let imageUrls = [];
                    questionImageList.map(item=>{
                        imageUrls.push(item.questionImagesUrl)
                    });
                    this.form.imageUrls = imageUrls;
                }
                console.log(res)
            }finally{
                this.loading = false;
            }
        },
        //上传图片
        uploadImages(e){
            this.form.imageUrls = [...this.form.imageUrls,e]
        },
        //删除图片
        deleteFile(e){
            this.form.imageUrls.splice(e,1)
        },
        //取消
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped></style>
